import { IShareItem } from '@/types';
import { Modal, message } from 'antd';
import { QRCodeSVG } from 'qrcode.react';
import ReactDOM from "react-dom";
import styles from './index.less'
interface IProps {
    data: IShareItem
}

const ShareModal: React.FC<IProps> = ({ data }) => {

    const error = () => {
        message.error('未知错误!');
        message.error('分享海报制作失败，请手动截图');
    };

    const handleCancel = () => {
        ReactDOM.unmountComponentAtNode(document.querySelector('.share-dialog') as Element);
    };

    return <Modal title="分享海报" okText="下载" cancelText="关闭" width="400px" visible={true} onOk={error} onCancel={handleCancel}>
        <div className={styles.sharesImg}>
            <img src={data.cover} alt="" />
        </div>
        <div className={styles.bold}>{data.title}</div>
        <div className={styles.summary}>{data.summary}</div>
        <div>
            <div className={styles.contentQrcode}>
                <QRCodeSVG value={`/article/${data.id}`} />
                <div className={styles.contentRight}>
                    <p>识别二维码查看文章</p>
                    <p>原文分享自 八维创作平台</p>
                </div>
            </div>
        </div>
    </Modal>
}
export function share(data: IShareItem) {
    let container = document.querySelector('.share-dialog')
    if (!container) {
        container = document.createElement('div');
        container.className = 'share-dialog';
        document.body.appendChild(container)
    }
    ReactDOM.render(<ShareModal data={data}/>, container);
}
export default ShareModal